<html title="Reasy settings">
<head title="Reasy settings">

<style type="text/css">
div  {
  width:60%;
  top:20%;
  left:20%;
  background-color:#ffffee;
  position:relative;
  padding:20px;
  border-style:solid;
}

body
{
  font-family:Tahoma;
  background-color:#ffffcc;
}
</style>

<script type="text/javascript">

  function toBool(str) {
    if (str) {
      if ("false" == str)
        return false;
      else
        return str;
    }
    return false;
  }
 
  function update(input) {
    var id = input.id;
    var wpm = document.getElementById(id);
    localStorage[id] = input.value;
  }

  function restore_int_setting(id, deflt) {
    var element = document.getElementById(id);
    var elementval = localStorage[id];
    if (elementval)
      element.value = parseInt(elementval);
    else
      element.value = deflt;
  }

  function restore_bool_setting(id) {
    var elem = document.getElementById(id);
    elem.checked = toBool(localStorage[id]);
  }

  function restore_options() {
    restore_int_setting("wpm", 300);
    restore_int_setting("fixation", 2);
    restore_int_setting("font_size", 20);
    restore_int_setting("punc_pause_length", 0);
    restore_bool_setting("ticker");
    restore_bool_setting("punc_pause");
  }
  
</script>

</head>
<body onload="restore_options()" title="Reasy settings">
<div align="right">
  <b><u>Reasy Settings</u></b>
  <br />
  <br />
  Words per minute
  <input id="wpm" onchange="update(this)" />
  <br />
  Fixation (number of words displayed at a time)
  <input id="fixation" onchange="update(this)" />
  <br />
  Font size
  <input id="font_size" onchange="update(this)" />
  <br />
  <input type="checkbox" id="punc_pause" onchange="update(this)" />
  Punctuation pause
  <input id="punc_pause_length" onchange="update(this)" />
  <br />
  Ticker tape (horizontally scroll text)
  <input type="checkbox" id="ticker" onchange="update(this)" />
  <br />
</div>
</body>
</html>